<template>
  <el-dialog
    title="代理详情"
    :visible.sync="visible"
    width="1000px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <div>直推</div>
    <el-table :data="list" :height="300" border stripe>
      <el-table-column label="代理类别" prop="item_no" width="150">
        <template slot-scope="scope">
          {{ scope.row.agent === 1 ? "社区代理" : "区县代理" }}
        </template>
      </el-table-column>
      <el-table-column label="代理省/市" width="150" align="center">
        <template slot-scope="scope">
          <el-cascader
            expand-trigger="hover"
            :options="cityList"
            :value="[scope.row.province, scope.row.city, scope.row.prefecture]"
            placeholder="未知"
            @change=""
            :props="{
              value: 'v',
              label: 'n',
              children: 'c'
            }"
            disabled
            size="mini"
            style="width:220px;"
          >
          </el-cascader>
        </template>
      </el-table-column>
      <el-table-column label="用户名/邀请码/绑定手机号" width="300">
        <template slot-scope="scope">
          {{ scope.row.nickname }} / {{ scope.row.inviter }} /
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名/身份证号" width="250">
        <template slot-scope="scope">
          {{ scope.row.realname }} / {{ scope.row.identity }}
        </template>
      </el-table-column>
    </el-table>
    <div>间推</div>
    <el-table :data="list1" :height="300" border stripe>
      <el-table-column label="代理类别" prop="item_no" width="150">
        <template slot-scope="scope">
          {{ scope.row.agent === 1 ? "社区代理" : "区县代理" }}
        </template>
      </el-table-column>
      <el-table-column label="代理省/市" width="150" align="center">
        <template slot-scope="scope">
          <el-cascader
            expand-trigger="hover"
            :options="cityList"
            :value="[scope.row.province, scope.row.city, scope.row.prefecture]"
            placeholder="未知"
            @change=""
            :props="{
              value: 'v',
              label: 'n',
              children: 'c'
            }"
            disabled
            size="mini"
            style="width:220px;"
          >
          </el-cascader>
        </template>
      </el-table-column>
      <el-table-column label="用户名/邀请码/绑定手机号" width="300">
        <template slot-scope="scope">
          {{ scope.row.nickname }} / {{ scope.row.inviter }} /
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名/身份证号" width="250">
        <template slot-scope="scope">
          {{ scope.row.realname }} / {{ scope.row.identity }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { getAgentTeam } from "@/api/agent-mng";
export default {
  props: ["visible", "id"],
  data() {
    return {
      list: [],
      list1: []
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        if (this.id) {
          getAgentTeam({ id: this.id }).then(res => {
            if (res.code === 200) {
              this.list = res.data.recommend;
              this.list1 = res.data.recommend_two;
            }
          });
        }
      } else {
        this.list = [];
        this.list1 = [];
      }
    }
  },
  methods: {},
  created() {}
};
</script>

<style lang="scss" scoped></style>
